const vcard_template = `
<div id="vcard-container" class="box">
    <div class="columns ">
        <div class="column" id="logo">
            <figure class="image">
                <img :src="logo" alt="مجتمع مس شهربابک" id="meslogo">
                <figcaption id="fig-title"> مسابقه حفظ قرآن کریم</figcaption>
             </figure>
        </div>
    </div>
    <div class="columns is-mobile">
        <div class="column is-mobile" >
            <img :src="photo" id="personal-photo" alt="">
        </div>
        <div class="column is-mobile">
            <span v-text="gender === 'female' ? 'خانم' : 'آقای'"></span>
            <span          v-text='fname +" " +lname'></span>
            <p v-text="socialid"></p>
           
        
        </div>
    </div>
    <div class="columns is-mobile">
    <div class="column is-mobile">
     <h5 class="title is-6">زمان:</h5>
            <h6 class="subtitle is-6">جمعه۶اردیبهشت۱۳۹۸ ساعت ۹نه صبح</h6>
        <h5 class="title is-6">مکان:</h5>
            <h6 v-text="address" class="subtitle is-6"></h6>
            <h6 v-text="footer" class="subtitle is-6"></h6>
    
</div>
</div>
<button id="print-btn" class="button" @click="jq('#print-btn').hide(); w.print();jq('#print-btn').show();">چاپ کارت</button>
</div>
`;

let vcard = Vue.component("vcard-template", {
  template: vcard_template,
  data: function() {
    return {
      w: window,
      jq: jQuery,
      logo: "https://kutt.it/meslogo",
      footer: `
      حضور یک‌ساعت قبل از شروع آزمون اجباری است.
     
      به همراه داشتن اصل کارت‌ملی اجباری می‌باشد
      `
    };
  },
  props: {
    fname: {},
    lname: {},
    socialid: {},
    location: {},
    gender: {},
    photo: {}
  },
  computed: {
    address: function() {
      if (this.location.includes("خ")) {
        return `
                خاتون‌آباد - فرهنگسرا خاتون‌آباد
                `;
      } else {
        return `
                شهربابک - مصلی نمازجمعه
                `;
      }
    }
  }
});

let app = new Vue({
  el: "#app",
  data: {
    classes: {
      socialId: {
        input: true,
        "is-medium": true,
        "is-danger": false,
        "is-warning": true,
        "is-success": false
      },
      phone: {
        input: true,
        "is-medium": true,
        "is-danger": false,
        "is-warning": true,
        "is-success": false
      }
    },
    fa_phone: "fas fa-mobile-alt",
    fa_idcard: "fas fa-id-badge",
    id_card_warning: false,
    id_card_warning_text: ``,
    phone_warning: false,
    phone_warning_text: "",
    phone: "",
    phonePrefix: "",
    socialId: "314",
    endOfPhone: "",
    logo: "https://kutt.it/meslogo",
    authenticated: false,
    user: {
      fname: "",
      lname: "",
      photo: "",
      gender: "",
      location: ""
    }
  },
  methods: {
    enIntegerValidate: function(inputName, event) {
      id_card_warning = false;

      numbers = "01234567890";
      keypressed = event.key.toString();
      // console.log(keypressed)
      if (!numbers.includes(keypressed)) {
        event.preventDefault();
      } else {
      }
      if (inputName === "socialId") {
        this.classes.socialId = {
          input: this.classes.socialId.input,
          "is-medium": true,
          "is-danger": false,
          "is-warning": true,
          "is-success": false
        };
        this.id_card_warning = false;
        this.social_id_check(keypressed);
      } else if (inputName === "phone") {
        (this.phone_warning = false),
          (this.fa_phone = "fas fa-mobile-alt"),
          (this.classes.phone = {
            input: true,
            "is-medium": true,
            "is-danger": false,
            "is-warning": true,
            "is-success": false
          });
        socialId = this.socialId;
        phone = this.phone.toString() + keypressed.toString();
        this.authenticate(phone, socialId);
      }

      // console.log(this.socialId);
      // if (inputName === 'socialId') {
      //
      //     if (!numbers.includes(keypressed)) {
      //         let len = this.socialId.length;
      //         // console.log(len);
      //         if (len === 1) {
      //             this.socialId = ''
      //         } else {
      //             this.socialId = this.socialId.substr(0, len - 1);
      //         }
      //
      //     }
      //     // console.log(inputName);
      //     // console.log(event.key);
    },
    social_id_check: function(k = "") {
      socialId = this.socialId.toString() + k.toString();
      len = socialId.length;
      //     console.log('len', len);
      if (len === 10) {
        fa_phone = "fas fa-spinner";
        phone = jQuery.post({
          context: this,

          url: vue_dict.ajxurl,
          data: {
            action: "social_id_check",
            social_id: socialId
          },
          success: function(res) {
            if (!res.found) {
              app.id_card_warning_text = `
                کدملی 
                ${socialId}
                در سامانه ثبت‌نام نکرده
                `;
              app.fa_idcard = "fas fa-times";
              jQuery("#phone-container").hide();
              app.classes.socialId["is-danger"] = true;
              app.classes.socialId["is-success"] = false;
              app.classes.socialId["is-warning"] = false;
              app.id_card_warning = true;
            }
            if (res.found === true) {
              app.fa_idcard = "fas fa-check";
              jQuery("#phone-container").show();
              app.classes.socialId["is-danger"] = false;
              app.classes.socialId["is-success"] = true;
              app.classes.socialId["is-warning"] = false;
              app.phone = res.phone;
            }
          }
        });
      }
    },
    authenticate: function(phone = null, socialid = null) {
      if (phone === null) {
        phone = this.phone.toString();
      }
      if (socialid === null) {
        socialid = this.socialId.toString();
      }
      if (socialid.length === 10 && phone.length === 11) {
        user = jQuery.post({
          url: vue_dict.ajxurl,
          data: {
            action: "social_id_check",
            social_id: socialId,
            phone: phone
          },
          success: function(res) {
            console.log(res);
            app.user.fname = res.fname;
            app.user.lname = res.lname;
            app.user.photo = res.photo;
            app.user.location = res.location;
            app.user.gender = res.gender;
            app.authenticated = res.found;
            if (!res.found) {
              app.fa_phone = "fas fa-times";
              app.classes.phone = {
                input: true,
                "is-medium": true,
                "is-danger": true,
                "is-warning": false,
                "is-success": false
              };
              app.phone_warning = true;
              app.phone_warning_text = `
              تلفن همراه وارد
              ${phone}
              برای کد ملی 
              ${socialid}
              ثبت نشده است.
              `;
            }
          }
        });
      }
    }
  }
});
